<template>
  <div class="shebei" :style="{height: siteContentViewHeight + 'px'}">
    <el-tree
      :data="shebeiData"
      :props="defaultProps"
      accordion
      @node-click="handleNodeClick"
      class="shebei-tree">
    </el-tree>
    <div class="shebei-detail">
      <div class="shebei-map">
        <bd-map :project="project" :key='mapKey' @getDataList="getDataList"></bd-map>
      </div>
      <el-card class="box-card" :body-style="{ padding: '4px' }">
        <div slot="header" class="clearfix">
          <div class="header-item">
            <span>总台数：</span>
            <span>{{shebeiCount.zongshu}}</span>
          </div>
          <div class="header-item">
            <span>运行台数：</span>
            <span>{{shebeiCount.yunxing}}</span>
          </div>
          <div class="header-item">
            <span>待机台数：</span>
            <span>{{shebeiCount.daiji}}</span>
          </div>
          <div class="header-item">
            <span>故障台数：</span>
            <span>{{shebeiCount.guzhang}}</span>
          </div>
         <!-- <div class="header-item">
            <span>报警台数：</span>
            <span>20</span>
          </div>
          <div class="header-item">
            <span>断线台数：</span>
            <span>12</span>
          </div>-->
        </div>
        <div class="shebei-detail-content" :style="{height: siteContentViewHeight - 163 + 'px'}">
          <div class="item-wrap" style="color:#e24d42;">
            <div class="item" v-for="(item,index) of inforData.jishu.data.light" :key="index">
              <span>{{item.name}}</span>
              <span>{{item.value}}</span>
            </div>
          </div>
          <div class="item-wrap" style="color:#6aaf62;">
            <div class="item" v-for="(item,index) of inforData.jishu.data.monitor" :key="index">
              <span>{{item.name}}</span>
              <span>{{item.value}}</span>
            </div>
          </div>
          <div class="item-wrap" style="color:#eab839;">
            <div class="item" v-for="(item,index) of inforData.jishu.data.wind" :key="index">
              <span>{{item.name}}</span>
              <span>{{item.value}}</span>
            </div>
          </div>
          <div class="item-wrap" style="color:#ef843c;">
            <div class="item" v-for="(item,index) of inforData.jishu.data.led" :key="index">
              <span>{{item.name}}</span>
              <span>{{item.value}}</span>
            </div>
          </div>
          <div class="item-wrap" style="color:#33b5e3;">
            <div class="item" v-for="(item,index) of inforData.jishu.data.one" :key="index">
              <span>{{item.name}}</span>
              <span>{{item.value}}</span>
            </div>
          </div>
          <div class="item-wrap" style="color:#33b5e3;">
            <div class="item" v-for="(item,index) of inforData.jishu.data.battery" :key="index">
              <span>{{item.name}}</span>
              <span>{{item.value}}</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import BdMap from './components/BdMap'
export default {
  name: 'shebei',
  components: {
    BdMap
  },
  data () {
    return {
      shebeiCount: {
        zongshu: '',
        yunxing: '',
        daiji: '',
        guzhang: ''
      },
      shebeiData: [
        // {
        //   label: '项目 1'
        // }, {
        //   label: '项目 2'
        // }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      mapKey: 1,
      project: {
        centerPoint: {
          lng: '121.550787',
          lat: '31.281591'
        },
        data: [
        ]
      },
      inforData: {
        id: '',
        basic: {
          title: '基本信息',
          data: {
            zznum: '21346',
            gps: '2131',
            ip: '132456',
            pro: '项目',
            owner: '张国强',
            sim: '898602C99816C0994256'
          }
        },
        jishu: {
          title: '项目信息',
          data: {
            light: [
              {
                name: '光伏板输入电压：',
                value: ''
              }, {
                name: '光伏板输入电流：',
                value: ''
              }, {
                name: '光伏板输入功率：',
                value: ''
              }, {
                name: '光感输入电压：',
                value: ''
              }
            ],
            wind: [
              {
                name: '风机输入直流电压：',
                value: ''
              }, {
                name: '风机输入直流电流：',
                value: ''
              }, {
                name: '风机热效电流：',
                value: ''
              }, {
                name: '风机输入直流功率：',
                value: ''
              }, {
                name: '风机有效充电电流：',
                value: ''
              }, {
                name: '风机卸荷平均电流：',
                value: ''
              }, {
                name: '风机当前转速：',
                value: ''
              }, {
                name: '风机运行状态：',
                value: ''
              }
            ],
            led: [
              {
                name: 'LED驱动器输出电压：',
                value: ''
              }, {
                name: 'LED驱动器输出电流：',
                value: ''
              }, {
                name: 'LED驱动器输出功率：',
                value: ''
              }, {
                name: 'LED驱动器输出状态：',
                value: ''
              }, {
                name: 'LED驱动器已输出时间：',
                value: ''
              }
            ],
            one: [
              {
                name: '第一路输出电流：',
                value: ''
              }, {
                name: '第一路输出功率：',
                value: ''
              }, {
                name: '第一路输出状态：',
                value: ''
              }, {
                name: '第一路控制模式：',
                value: ''
              }
            ],
            battery: [
              {
                name: '蓄电池电压：',
                value: ''
              }, {
                name: '蓄电池充电电流：',
                value: ''
              }, {
                name: '蓄电池充电功率：',
                value: ''
              }, {
                name: '蓄电池总充电量：',
                value: ''
              }, {
                name: '蓄电池剩余电量：',
                value: ''
              }, {
                name: '蓄电池当前状态：',
                value: ''
              }
            ],
            monitor: [
              {
                name: '摄像头当前状态：',
                value: ''
              }, {
                name: '摄像头连接状态：',
                value: ''
              }, {
                name: '摄像头输出电压：',
                value: ''
              }
            ]
          }
        }
      }
    }
  },
  computed: {
    documentClientHeight: {
      get () { return this.$store.state.common.documentClientHeight }
    },
    siteContentViewHeight () {
      let height = this.documentClientHeight - 50 - 55 - 15 - 40 - 2
      return height
    }
  },
  // 执行刷新
  mounted () {
    if (this.timer) {
      clearInterval(this.timer)
    } else {
      this.timer = setInterval(() => {
        if (this.inforData.id !== '') {
          this.getDataList(this.inforData.id)
        }
      }, 200000)
    }
  },
  activated () {
    // this.getDataList()
    this.getNodeList()
  },
  methods: {
    // 获取监控参数
    getDataList (id) {
      this.inforData.id = id
      this.$http({
        url: this.$http.adornUrl(`/udp/r5rmskillstatus/redisList/${id}`),
        methods: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          // light
          this.inforData.jishu.data.light[0].value = data.model.ssUdfchar01
          this.inforData.jishu.data.light[1].value = data.model.ssUdfchar02
          this.inforData.jishu.data.light[2].value = data.model.ssUdfchar03
          this.inforData.jishu.data.light[3].value = data.model.ssUdfchar04
          // wind
          this.inforData.jishu.data.wind[0].value = data.model.ssUdfchar16
          this.inforData.jishu.data.wind[1].value = data.model.ssUdfchar17
          this.inforData.jishu.data.wind[2].value = data.model.ssUdfchar18
          this.inforData.jishu.data.wind[3].value = data.model.ssUdfchar19
          this.inforData.jishu.data.wind[4].value = data.model.ssUdfchar20
          this.inforData.jishu.data.wind[5].value = data.model.ssUdfchar21
          this.inforData.jishu.data.wind[6].value = data.model.ssUdfchar22
          this.inforData.jishu.data.wind[7].value = data.model.ssUdfchar23
          // led
          this.inforData.jishu.data.led[0].value = data.model.ssUdfchar05
          this.inforData.jishu.data.led[1].value = data.model.ssUdfchar06
          this.inforData.jishu.data.led[2].value = data.model.ssUdfchar07
          this.inforData.jishu.data.led[3].value = data.model.ssUdfchar08
          this.inforData.jishu.data.led[4].value = data.model.ssUdfchar09
          // one
          this.inforData.jishu.data.one[0].value = data.model.ssUdfchar24
          this.inforData.jishu.data.one[1].value = data.model.ssUdfchar25
          this.inforData.jishu.data.one[2].value = data.model.ssUdfchar26
          this.inforData.jishu.data.one[3].value = data.model.ssUdfchar27
          // battery
          this.inforData.jishu.data.battery[0].value = data.model.ssUdfchar10
          this.inforData.jishu.data.battery[1].value = data.model.ssUdfchar11
          this.inforData.jishu.data.battery[2].value = data.model.ssUdfchar12
          this.inforData.jishu.data.battery[3].value = data.model.ssUdfchar13
          this.inforData.jishu.data.battery[4].value = data.model.ssUdfchar14
          this.inforData.jishu.data.battery[5].value = data.model.ssUdfchar15
          // monitor
          this.inforData.jishu.data.monitor[0].value = data.model.ssUdfchar32
          this.inforData.jishu.data.monitor[1].value = data.model.ssUdfchar33
          this.inforData.jishu.data.monitor[2].value = data.model.ssUdfchar35
        }
      })
    },
    // 获取项目节点
    getNodeList () {
      this.$http({
        url: this.$http.adornUrl('/udp/r5rmitem/nodeList'),
        methods: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.shebeiData = []
          for (let i = 0; i < data.r5rmItem.length; i++) {
            let itPoint = data.r5rmItem[i].itPoint
            this.shebeiData.push({
              label: data.r5rmItem[i].itDesc,
              itCode: data.r5rmItem[i].itCode,
              lng: itPoint.split(',')[0],
              lat: itPoint.split(',')[1]
            })
          }
        }
      })
    },
    // 点击项目节点
    handleNodeClick (data) {
      this.mapKey ++
      this.project.centerPoint.lng = data.lng
      this.project.centerPoint.lat = data.lat
      this.$http({
        url: this.$http.adornUrl(`/udp/r5rmobjects/objList/${data.itCode}`),
        methods: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.project.data = []
          let value = data.jsonObject
          // 设备台数
          this.shebeiCount.zongshu = value.zongshu
          this.shebeiCount.daiji = value.daiji
          this.shebeiCount.yunxing = value.yunxing
          this.shebeiCount.guzhang = value.guzhang
          // 设备参数
          for (let i = 0; i < value.r5rmObjects.length; i++) {
            let gps = value.r5rmObjects[i].objGps
            this.project.data.push(
              {
                id: value.r5rmObjects[i].objCode,
                num: value.r5rmObjects[i].objCode,
                gps: value.r5rmObjects[i].objGps,
                // ip: value.r5rmObjects[i].objIp,
                  // 测试
                project: value.r5rmObjects[i].objUdfchar03,
                sim: value.r5rmObjects[i].objNumber,
                state: value.r5rmObjects[i].objUdfchar04,
                position: {
                  lng: gps.split(',')[0],
                  lat: gps.split(',')[1]
                },
                owner: value.r5rmObjects[i].objOwner
              }
            )
          }
        }
      })
    }
  }
}
</script>
<style lang="scss">
  .shebei{
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 100%;
    .shebei-tree{
      width: 150px;
    }
    .shebei-detail{
      display: flex;
      flex-direction: row;
      flex: 1;
      background-color: #eee;
      .shebei-map{
        flex: 1;
        height: 100%;
      }
      .box-card {
        width: 450px;
        height: 100%;
        .el-card__header{
          padding: 4px 10px;
          background-color: #263238;
          color: #fff;
          font-weight: 700;
          .header-item{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 24px;
            line-height: 24px;
            font-size: 14px;
          }
        }
        .shebei-detail-content{
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          .item-wrap{
            width: 48%;
            margin-bottom: 10px;
            margin-right: 3%;
            .item {
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              height: 24px;
              line-height: 24px;
              font-size: 14px;
            }
          }
        }
        .clearfix:before,
        .clearfix:after {
          display: table;
          content: "";
        }
        .clearfix:after {
          clear: both
        }
      }
    }
  }
</style>
